<template>
  <div style="width: 95%;margin: 15px auto; border: 1px solid #CFD8DC">
    <div class="class_detail">
      <div style="height: 45px;line-height: 45px; border-bottom: 1px solid #CFD8DC;background-color: #ECEFF1">
        <div class="font" style="margin-left: 20px;">班级信息</div>
      </div>
      <table class="tftable" border="1">
        <tr>
          <td class="font">班级编号</td>
          <td class="header_td">{{ classDetails.classNumber }}</td>
          <td class="font">班级名称</td>
          <td class="header_td">{{ classDetails.className }}</td>
          <td class="font">所授课程</td>
          <td class="header_td">{{ classDetails.courseName }}</td>
        </tr>
        <tr>
          <td class="font">所属校区</td>
          <td class="header_td">{{ classDetails.schoolName }}</td>
          <td class="font">任课老师</td>
          <td class="header_td">{{ classDetails.nickName }}</td>
          <td class="font">助理老师</td>
          <td class="header_td"></td>
        </tr>
        <tr>
          <td class="font">默认扣除课时</td>
          <td class="header_td">{{ classDetails.classDeductHours }}</td>
          <td class="font">上课时间</td>
          <td class="header_td" colspan="3">{{ classDetails.classTime }}</td>

        </tr>
        <tr>
          <td class="font">备注</td>
          <td colspan="5" class="header_td">{{ classDetails.classNote }}</td>
        </tr>
      </table>
    </div>
    <div class="class_student">
      <div style="height: 45px;line-height: 45px; border-bottom: 1px solid #CFD8DC;background-color: #ECEFF1">
        <div class="font" style="margin-left: 20px;">班级学员</div>
      </div>
      <div style="width: 97%;margin: 20px auto;">
        <el-table v-loading="loading" :data="classStudentList">
          <el-table-column width="165" label="学员编号" align="center" prop="student.studentNumber"></el-table-column>
          <el-table-column width="165" label="学员姓名" align="center" prop="student.studentName"/>
          <el-table-column label="手机号码" align="center" prop="student.studentPhone"/>
          <el-table-column label="身份证号" align="center" prop="student.studentIdNumber"/>
          <el-table-column label="剩余课时" align="center" prop="courseHour"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="updateStudentClass(scope.row)"
                v-hasPermi="['school:class:edit']"
              >调班
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                v-hasPermi="['school:class:delete']"
                @click="deleteStudentClass(scope.row)"
              >移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-dialog
            title="调换班级"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <div>
              <el-select v-model="fromSubmit.classId" placeholder="请选择班级">
                <el-option
                  v-for="(item,index) in classList"
                  :key="index"
                  :label="item.className"
                  :value="item.classId">
                </el-option>
              </el-select>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="submitStudentClass">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getClassStudent, getSchoolClass, updateStudentClass,deleteStudentClass} from "../../../api/school/class";

export default {
  name: "classDetails",
  data() {
    return {
      classDetails: this.$route.query.classDetails,
      classStudentList: [],
      loading: true,
      dialogVisible: false,
      classList: [],
      fromSubmit: {
        classId: null,
        classStudentId: null
      }


    }
  },
  created() {
    this.getClassStudentData();
  },
  methods: {
    updateStudentClass(row) {
      this.fromSubmit.classStudentId = row.classStudentId;
      this.dialogVisible = true;

    },
    submitStudentClass() {
      let fromSubmit = this.fromSubmit;
      updateStudentClass(fromSubmit).then(res => {
        if (res.code === 200) {
          this.msgSuccess("更换班级成功")
          this.getClassStudentData();
          this.dialogVisible = false
        }
      })

    },
    deleteStudentClass(row){
      let classStudentId = row.classStudentId;
      this.$confirm('确认移除这个学生吗？')
        .then(_ => {
          deleteStudentClass(classStudentId).then(res=>{
            if (res.code === 200) {
              this.msgSuccess("移除成功")
              this.getClassStudentData();
            }
          })
        })
        .catch(_ => {});
    },
    getClassStudentData() {
      let classId = this.$route.query.classDetails.classId;
      getClassStudent(classId).then(res => {
        if (res.code === 200) {
          this.loading = false;
          this.classStudentList = res.data;
        }
      })
      getSchoolClass(classId).then(res => {
        if (res.code === 200) {
          this.classList = res.data;
        }
      })
      this.fromSubmit.classId = classId;

    },
    handleClose() {
      this.dialogVisible = false
    }
  }

}
</script>

<style scoped>
.tftable {

  color: #333333;
  width: 97%;
  border-width: 1px;
  border-color: #a9a9a9;
  border-collapse: collapse;
  margin: 20px auto;
}

.class_detail {
  height: 260px;
}

.header_td {
  background: white;
}

.tftable tr {
  background-color: #F0F3F5;
  width: 20px;
}

.font {
  font-weight: 1000;
}

.tftable td {
  font-size: 15px;
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #a9a9a9;
}
</style>
